<script setup>
import { ref, onMounted } from 'vue'

// 传承活动数据
const activities = [
  {
    id: 1,
    title: '中国皮影艺术展',
    date: '2023年10月-12月',
    location: '中国国家博物馆',
    description: '本次展览汇集了全国各地的精品皮影作品，包括历史文物和当代新作，通过实物展示、多媒体演示和现场表演等形式，全面展现中国皮影艺术的魅力。',
    image: 'https://picsum.photos/id/230/600/400'
  },
  {
    id: 2,
    title: '皮影戏进校园活动',
    date: '2023年9月-2024年6月',
    location: '全国各地中小学',
    description: '该活动旨在向青少年普及皮影艺术知识，通过讲座、工作坊和互动表演等形式，让学生近距离接触和体验皮影艺术，培养对传统文化的兴趣和热爱。',
    image: 'https://picsum.photos/id/231/600/400'
  },
  {
    id: 3,
    title: '国际皮影艺术节',
    date: '2024年5月',
    location: '陕西西安',
    description: '来自中国、日本、韩国、法国等国家的皮影艺术团体将参加本次艺术节，通过展演、交流和研讨等活动，促进国际皮影艺术的交流与合作。',
    image: 'https://picsum.photos/id/232/600/400'
  },
  {
    id: 4,
    title: '皮影技艺传承培训班',
    date: '常年举办',
    location: '各地非物质文化遗产保护中心',
    description: '由国家级和省级传承人亲自授课，教授皮影雕刻、表演和制作等技艺，培养年轻的皮影艺术传承人才，推动皮影艺术的可持续发展。',
    image: 'https://picsum.photos/id/233/600/400'
  }
]

// 教育项目数据
const educationPrograms = [
  {
    id: 1,
    title: '中小学皮影艺术教育课程',
    target: '中小学生',
    content: '将皮影艺术纳入学校艺术教育课程体系，开发适合不同年龄段学生的教材和教学方法，通过课堂教学、实践活动和社团活动等形式，系统传授皮影艺术知识和技能。',
    image: 'https://picsum.photos/id/234/400/300'
  },
  {
    id: 2,
    title: '高校皮影艺术专业教育',
    target: '大学生',
    content: '在高校开设皮影艺术相关专业或课程，培养具有较高理论水平和实践能力的皮影艺术专门人才，为皮影艺术的研究、传承和创新提供人才支持。',
    image: 'https://picsum.photos/id/235/400/300'
  },
  {
    id: 3,
    title: '社会公众体验活动',
    target: '普通民众',
    content: '在博物馆、文化馆、社区等场所举办皮影艺术体验活动，通过讲座、工作坊、互动表演等形式，让普通民众了解和体验皮影艺术，提高公众对传统文化的认知和保护意识。',
    image: 'https://picsum.photos/id/236/400/300'
  }
]

// 创新发展案例
const innovationCases = [
  {
    id: 1,
    title: '数字化保护与传播',
    description: '利用3D扫描、数字建模等现代技术，对传统皮影作品进行数字化记录和保存，建立皮影艺术数据库，通过互联网、移动应用等新媒体平台进行传播推广。',
    image: 'https://picsum.photos/id/237/600/400'
  },
  {
    id: 2,
    title: '皮影元素文创产品开发',
    description: '将皮影艺术元素与现代设计相结合，开发具有传统文化特色的文创产品，如文具、服饰、家居用品等，让皮影艺术走进日常生活，扩大传统文化的影响力。',
    image: 'https://picsum.photos/id/238/600/400'
  },
  {
    id: 3,
    title: '皮影戏与现代科技融合',
    description: '将皮影戏与投影技术、数字动画、虚拟现实等现代科技相结合，创作具有时代特色的新皮影戏作品，如《数字化皮影戏》《VR皮影体验》等，吸引更多年轻人的关注和喜爱。',
    image: 'https://picsum.photos/id/239/600/400'
  }
]

// 调查问卷数据
const surveyQuestions = [
  { id: 1, question: '您了解皮影戏吗？', options: ['非常了解', '比较了解', '一般', '不太了解', '完全不了解'] },
  { id: 2, question: '您看过皮影戏表演吗？', options: ['看过多次', '看过几次', '看过一次', '没看过'] },
  { id: 3, question: '您认为皮影戏传承的最大困难是什么？', options: ['缺乏年轻观众', '传承人老龄化', '缺乏创新', '资金不足', '其他'] },
  { id: 4, question: '您希望通过什么方式了解更多关于皮影戏的信息？', options: ['博物馆展览', '现场表演', '互联网', '学校教育', '其他'] },
  { id: 5, question: '您对皮影戏的未来发展有什么建议？', type: 'text' }
]

// 调查问卷状态
const surveyAnswers = ref({})
const showThankYou = ref(false)

// 提交调查问卷
const submitSurvey = () => {
  // 在实际应用中，这里可以将数据发送到服务器
  console.log('Survey submitted:', surveyAnswers.value)
  showThankYou.value = true
}
</script>

<template>
  <div class="culture-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <h1 class="page-title">文化传承</h1>
      <p class="page-subtitle">让皮影艺术在新时代绽放光彩</p>
    </div>

    <!-- 引言部分 -->
    <section class="intro-section container">
      <p class="intro-text">
        非物质文化遗产的传承和发展是一个民族文化自信的重要体现。皮影戏作为中国传统民间艺术的瑰宝，承载着丰富的文化内涵和历史记忆，需要我们共同努力去保护、传承和创新。
      </p>
      <p class="intro-text">
        近年来，政府、文化机构、传承人和社会各界共同努力，通过各种方式推动皮影戏的传承和发展，让这一古老的艺术在新时代焕发出新的生机。
      </p>
    </section>

    <!-- 传承活动 -->
    <section class="activities-section container">
      <h2 class="section-title">传承活动</h2>
      <div class="activities-grid">
        <div v-for="activity in activities" :key="activity.id" class="activity-card">
          <div class="activity-image">
            <img :src="activity.image" :alt="activity.title" class="card-image" />
          </div>
          <div class="activity-info">
            <h3 class="activity-title">{{ activity.title }}</h3>
            <div class="activity-meta">
              <span class="activity-date">{{ activity.date }}</span>
              <span class="activity-location">{{ activity.location }}</span>
            </div>
            <p class="activity-description">{{ activity.description }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 教育推广 -->
    <section class="education-section">
      <div class="container">
        <h2 class="section-title">教育推广</h2>
        <p class="section-intro">
          教育是文化传承的重要途径。通过系统的教育和推广活动，可以让更多的人了解、喜爱和参与到皮影艺术的传承中来。
        </p>
        <div class="education-grid">
          <div v-for="program in educationPrograms" :key="program.id" class="education-card">
            <div class="education-image">
              <img :src="program.image" :alt="program.title" class="program-image" />
            </div>
            <div class="education-content">
              <h3 class="program-title">{{ program.title }}</h3>
              <p class="program-target">目标群体：{{ program.target }}</p>
              <p class="program-description">{{ program.description }}</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 创新发展 -->
    <section class="innovation-section container">
      <h2 class="section-title">创新发展</h2>
      <p class="section-intro">
        传统艺术要在现代社会生存和发展，必须与时俱进，不断创新。皮影戏的传承和发展，需要在保持传统特色的基础上，融入现代元素，探索新的表现形式和传播方式。
      </p>
      <div class="innovation-cases">
        <div v-for="caseItem in innovationCases" :key="caseItem.id" class="innovation-case">
          <div class="case-image">
            <img :src="caseItem.image" :alt="caseItem.title" class="case-img" />
          </div>
          <div class="case-content">
            <h3 class="case-title">{{ caseItem.title }}</h3>
            <p class="case-description">{{ caseItem.description }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 参与支持 -->
    <section class="participation-section">
      <div class="container">
        <h2 class="section-title">参与支持</h2>
        <p class="section-intro">
          皮影戏的传承和发展需要全社会的共同参与和支持。无论您是普通观众、文化爱好者，还是企业家、艺术家，都可以通过各种方式为皮影艺术的传承和发展贡献力量。
        </p>
        <div class="participation-ways">
          <div class="participation-way">
            <div class="way-icon">👁️</div>
            <h3 class="way-title">观看演出</h3>
            <p class="way-description">关注和观看皮影戏演出，支持传统艺术的市场化发展。</p>
          </div>
          <div class="participation-way">
            <div class="way-icon">🎓</div>
            <h3 class="way-title">学习体验</h3>
            <p class="way-description">参加皮影艺术培训和体验活动，亲身感受皮影艺术的魅力。</p>
          </div>
          <div class="participation-way">
            <div class="way-icon">💡</div>
            <h3 class="way-title">创新创作</h3>
            <p class="way-description">将皮影元素融入现代艺术创作，探索传统艺术的新表达。</p>
          </div>
          <div class="participation-way">
            <div class="way-icon">🤝</div>
            <h3 class="way-title">支持资助</h3>
            <p class="way-description">通过资金支持、场地提供等方式，帮助皮影艺术团体和传承人。</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 公众调查 -->
    <section class="survey-section container">
      <h2 class="section-title">公众调查</h2>
      <p class="section-intro">
        为了更好地了解公众对皮影戏的认知和需求，以便更有针对性地开展传承和推广工作，我们诚邀您参与本次调查。
      </p>
      <div v-if="!showThankYou" class="survey-form">
        <div v-for="question in surveyQuestions" :key="question.id" class="survey-question">
          <label class="question-label">{{ question.id }}. {{ question.question }}</label>
          <div v-if="question.type === 'text'" class="question-text">
            <textarea 
              v-model="surveyAnswers[question.id]" 
              class="text-input"
              rows="4"
              placeholder="请输入您的建议..."
            ></textarea>
          </div>
          <div v-else class="question-options">
            <label v-for="(option, index) in question.options" :key="index" class="option-label">
              <input 
                type="radio" 
                v-model="surveyAnswers[question.id]" 
                :value="option"
                class="option-input"
              />
              <span class="option-text">{{ option }}</span>
            </label>
          </div>
        </div>
        <button @click="submitSurvey" class="submit-button">提交调查</button>
      </div>
      <div v-else class="thank-you-message">
        <h3>感谢您的参与！</h3>
        <p>您的反馈对我们非常重要，我们将认真分析每一份调查问卷，为皮影戏的传承和发展提供参考。</p>
      </div>
    </section>
  </div>
</template>

<style scoped>
/* 页面头部 */
.page-header {
  background-color: var(--color-secondary);
  color: white;
  text-align: center;
  padding: 3rem 2rem;
}

.page-title {
  font-size: 3rem;
  margin: 0 0 1rem 0;
  color: var(--color-accent);
  font-family: 'STZhongsong', serif;
}

.page-subtitle {
  font-size: 1.5rem;
  margin: 0;
  opacity: 0.9;
}

/* 通用容器 */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 2rem;
}

.section-title {
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 3rem;
  color: var(--color-heading);
  position: relative;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background-color: var(--color-primary);
}

.section-intro {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 3rem;
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--color-text-light);
}

/* 引言部分 */
.intro-text {
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 1.5rem;
  text-align: center;
  color: var(--color-text-light);
}

/* 传承活动 */
.activities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 2.5rem;
}

.activity-card {
  background-color: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.activity-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
}

.activity-image {
  height: 220px;
  overflow: hidden;
}

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.activity-card:hover .card-image {
  transform: scale(1.03);
}

.activity-info {
  padding: 1.5rem;
}

.activity-title {
  font-size: 1.5rem;
  color: var(--color-secondary);
  margin: 0 0 1rem 0;
}

.activity-meta {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  color: var(--color-primary);
}

.activity-description {
  line-height: 1.7;
  color: var(--color-text-light);
  margin: 0;
}

/* 教育推广 */
.education-section {
  background-color: var(--color-background-soft);
}

.education-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 2rem;
}

.education-card {
  background-color: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.education-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.education-image {
  height: 200px;
  overflow: hidden;
}

.program-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.education-card:hover .program-image {
  transform: scale(1.03);
}

.education-content {
  padding: 1.5rem;
  flex-grow: 1;
}

.program-title {
  font-size: 1.4rem;
  color: var(--color-secondary);
  margin: 0 0 0.5rem 0;
}

.program-target {
  font-size: 1rem;
  color: var(--color-primary);
  margin: 0 0 1rem 0;
  font-weight: 500;
}

.program-description {
  line-height: 1.7;
  color: var(--color-text-light);
  margin: 0;
}

/* 创新发展 */
.innovation-cases {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.innovation-case {
  background-color: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.innovation-case:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
}

.case-image {
  overflow: hidden;
}

.case-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.innovation-case:hover .case-img {
  transform: scale(1.03);
}

.case-content {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.case-title {
  font-size: 1.8rem;
  color: var(--color-secondary);
  margin: 0 0 1.5rem 0;
}

.case-description {
  line-height: 1.8;
  color: var(--color-text-light);
  margin: 0;
}

/* 参与支持 - 皮影戏风格 */
.participation-section {
  background-color: var(--color-background-soft);
  padding: 3rem 0;
  position: relative;
  overflow: hidden;
}

/* 背景装饰 */
.participation-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../assets/shadowplay_background.svg');
  background-size: 300px 300px;
  opacity: 0.05;
  z-index: 0;
}

.participation-section .container {
  position: relative;
  z-index: 1;
}

.participation-ways {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* 皮影戏风格的参与方式卡片 */
.participation-way {
  background-color: var(--color-background-soft);
  border-radius: 8px;
  padding: 2.5rem 1.5rem;
  text-align: center;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-border);
  background-image: linear-gradient(to bottom, var(--color-background-soft), var(--c-paper));
}

/* 卡片装饰边框 */
.participation-way::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border: 1px solid var(--color-accent);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  border-radius: 6px;
}

.participation-way:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(166, 36, 36, 0.2);
  border-color: var(--color-accent);
}

.participation-way:hover::before {
  opacity: 0.5;
}

/* 卡片底部装饰 */
.participation-way::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(to right, transparent, var(--color-primary), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.participation-way:hover::after {
  opacity: 1;
}

.way-icon {
  font-size: 3.5rem;
  margin-bottom: 1.5rem;
  color: var(--color-primary);
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.2));
  transition: transform 0.3s ease;
}

.participation-way:hover .way-icon {
  transform: scale(1.1);
}

.way-title {
  font-size: 1.6rem;
  color: var(--color-primary);
  margin: 0 0 1rem 0;
  font-family: 'STZhongsong', '华文行楷', serif;
  letter-spacing: 1px;
  position: relative;
  display: inline-block;
  padding-bottom: 0.5rem;
}

.way-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 2px;
  background-color: var(--color-accent);
  opacity: 0.7;
}

.way-description {
  line-height: 1.8;
  color: var(--color-text);
  margin: 0;
  font-family: 'STKaiti', '楷体', serif;
  font-size: 1.05rem;
  opacity: 0.9;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .participation-ways {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .participation-way {
    padding: 2rem 1.5rem;
  }
  
  .way-icon {
    font-size: 3rem;
  }
  
  .way-title {
    font-size: 1.4rem;
  }
}

/* 公众调查 */
.survey-form {
  max-width: 800px;
  margin: 0 auto;
  background-color: white;
  border-radius: 12px;
  padding: 2.5rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.survey-question {
  margin-bottom: 2rem;
}

.question-label {
  display: block;
  font-size: 1.1rem;
  color: var(--color-text);
  margin-bottom: 1rem;
  font-weight: 500;
}

.question-options {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.option-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 0.8rem;
  border-radius: 8px;
  transition: background-color 0.2s ease;
}

.option-label:hover {
  background-color: var(--color-background-soft);
}

.option-input {
  margin-right: 0.8rem;
  accent-color: var(--color-primary);
}

.option-text {
  color: var(--color-text-light);
}

.text-input {
  width: 100%;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 1rem;
  resize: vertical;
  transition: border-color 0.3s ease;
}

.text-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.submit-button {
  display: block;
  width: 100%;
  padding: 1rem;
  background-color: var(--color-primary);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.submit-button:hover {
  background-color: var(--color-secondary);
}

.thank-you-message {
  max-width: 800px;
  margin: 0 auto;
  background-color: white;
  border-radius: 12px;
  padding: 3rem;
  text-align: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.thank-you-message h3 {
  font-size: 1.8rem;
  color: var(--color-primary);
  margin: 0 0 1rem 0;
}

.thank-you-message p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--color-text-light);
  margin: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-title {
    font-size: 2.2rem;
  }
  
  .page-subtitle {
    font-size: 1.2rem;
  }
  
  .activities-grid,
  .education-grid {
    grid-template-columns: 1fr;
  }
  
  .innovation-case {
    grid-template-columns: 1fr;
  }
  
  .case-content {
    padding: 1.5rem;
  }
  
  .participation-ways {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .survey-form {
    padding: 1.5rem;
  }
  
  .thank-you-message {
    padding: 2rem;
  }
}

@media (max-width: 576px) {
  .participation-ways {
    grid-template-columns: 1fr;
  }
}
</style>